<template>
  <!-- 统一页面布局 -->
  <PageCard>
    <!-- 多tabs表格 表单 -->
    <FormTablePage
      ref="databaseFormPage"
      :formConfig="formConfig"
      :formRowData="rowData"
      :form-current-row-id.sync="currentRowId"
      :formTableRowIds="tableRowIds"
      :formGridTabs="formGridTabs"
      :gridActiveTabs="gridActiveTabs"
      @formBackEvent="backEvent"
      @formLastNextRow="lastNextRow"
    />

    <!-- 数据资源新增编辑 -->
    <DatabaseAddEdit
      :visible.sync="databaseConfig.visible"
      :form-id="databaseConfig.formId"
      :row-id.sync="databaseConfig.rowId"
      :title="databaseConfig.title"
      :grid="databaseConfig.grid"
      :refreshGrid="databaseConfig.refreshGrid"
    />

    <Audit
      :visible.sync="auditConfig.visible"
      :form.sync="auditConfig.form"
      :title.sync="auditConfig.title"
      @confirm="confirmMerchantsHandle"
    />

    <DatabaseSyncDrawer
      :visible.sync="databaseSyncConfig.visible"
      :databaseId.sync="databaseSyncConfig.databaseId"
    />
  </PageCard>
</template>
<script>
import PageCard from "@/components/PageCard/index";
import FormTablePage from "@/components/FormTablePage/index";
import Audit from "../components/audit.vue";
import DatabaseSyncDrawer from "../components/databaseSyncDrawer.vue";

import storage from "@/utils/storage";

import {
  merchantDetail,
  merchantHandle,
  merchantFinish,
  merchantReject,
} from "@/api/merchant";
import {
  databaseList,
  databaseDelete,
  databaseEnabled,
  databaseRelease,
} from "@/api/database";
import { merchantsHandleList } from "@/api/merchants-handle";

import DatabaseAddEdit from "../components/databaseAddEdit.vue";

export default {
  name: "MerchantDetailPage",
  components: {
    PageCard,
    FormTablePage,
    DatabaseAddEdit,
    Audit,
    DatabaseSyncDrawer,
  },
  data() {
    return {
      tableRowIds: [],
      currentRowId: null,
      rowData: null,
      gridActiveTabs: "database",
      databaseConfig: {
        visible: false,
        title: "",
        formId: null,
        rowId: null,
        grid: null,
        refreshGrid: null,
      },
      auditConfig: {
        visible: false,
        title: "",
        form: {},
      },
      databaseSyncConfig: {
        visible: false,
        databaseId: null,
      },
      formConfig: {
        title: "商户信息-表单",
        toolBarBtns: [
          {
            name: "处理中",
            type: "success",
            iconName: "handle",
            permission: "MerchantHandle",
            showCondition: (rowData) => {
              if (!rowData) return false;
              return rowData.status === 1;
            },
            click: async (rowId) => {
              this.currentRowId = rowId;
              this.auditConfig.visible = true;
              this.auditConfig.title = "审核";
            },
          },
          {
            name: "驳回",
            type: "success",
            iconName: "reject",
            permission: "MerchantReject",
            confirm: {
              title: "审核",
              message: "确定驳回该条申请数据吗?",
            },
            click: async (rowId) => {
              await merchantReject(rowId);
              this.currentRowId = rowId;
              this.loadMerchantDetail();
            },
            showCondition: (rowData) => {
              if (!rowData) return false;
              return rowData.status === 1;
            },
          },
          {
            name: "审核完成",
            type: "primary",
            iconName: "audit-finish",
            permission: "MerchantAuditFinish",
            confirm: {
              title: "审核",
              message: "确定审核通过该条数据吗?",
            },
            showCondition: (rowData) => {
              if (!rowData) return false;
              return rowData.status === 2;
            },
            click: async (rowId) => {
              await merchantFinish(rowId);
              this.currentRowId = rowId;
              this.loadMerchantDetail();
            },
          },
        ],
        disabledForm: (rowData) => {
          return rowData.status !== 0;
        },
        collapse: [
          {
            title: "账号信息",
            name: "userInfo",
            isOpen: true,
            formItems: [
              [
                {
                  title: "账号",
                  name: "username",
                  col: 5,
                },
                {
                  title: "姓名",
                  name: "name",
                  col: 5,
                },
                {
                  title: "手机号",
                  name: "phone",
                  col: 5,
                  width: 150,
                },
                {
                  title: "身份证号",
                  name: "idCard",
                  col: 5,
                },
              ],
              [
                {
                  title: "住址",
                  name: "loginAddress",
                  col: 20,
                  input: "textarea",
                },
              ],
              [
                {
                  title: "商户编号",
                  name: "merchantsNo",
                  col: 5,
                },
                {
                  title: "审核状态",
                  name: "status",
                  col: 5,
                  input: "select",
                  options: this.$config.MERCHANT_APPLY_STATUS,
                },
              ],
            ],
          },
          {
            title: "紧急联系人",
            name: "contacts",
            isOpen: true,
            formItems: [
              [
                {
                  title: "姓名",
                  name: "contactsName",
                  col: 5,
                },
                {
                  title: "手机号",
                  name: "contactsPhone",
                  col: 5,
                },
                {
                  title: "住址",
                  name: "contactsAddress",
                  col: 10,
                },
              ],
            ],
          },
        ],
        formChange: (data) => {
          console.log(data);
        },
      },
      formGridTabs: [
        {
          label: "资源库信息",
          name: "database",
          type: "grid",
          loading: false,
          height: 700,
          pagination: {
            onShow: false,
          },
          toolbarBtns: [
            {
              name: "新增",
              type: "primary",
              iconName: "add",
              permission: "DatabaseAdd",
              onDisabled: (formData) => {
                return formData.status !== 3;
              },
              click: (formId, refreshGrid, _this) => {
                this.databaseConfig.formId = formId;
                this.databaseConfig.visible = true;
                this.databaseConfig.title = "新增【资源库】";
                this.databaseConfig.grid = _this;
                this.databaseConfig.refreshGrid = refreshGrid;
              },
            },
          ],
          columns: [
            {
              title: "资源库",
              name: "databaseType",
              width: 150,
              align: "center",
              select: true,
              options: this.$config.DATABASE_TYPE,
            },
            {
              title: "账号",
              name: "username",
              width: 150,
              align: "center",
            },
            {
              title: "协议",
              name: "protocol",
              width: 150,
              align: "center",
            },
            {
              title: "域名",
              name: "domain",
              width: 450,
              align: "center",
            },
            {
              title: "端口",
              name: "port",
              width: 150,
              align: "center",
            },
            {
              title: "库名",
              name: "name",
              width: 200,
              align: "center",
            },
            {
              title: "修改人",
              name: "modifyName",
              width: 150,
              align: "center",
            },
            {
              title: "创建人",
              name: "createName",
              width: 150,
              align: "center",
            },
            {
              title: "启用状态",
              name: "isEnabled",
              width: 150,
              align: "center",
              select: true,
              options: this.$config.ENABLED_STATUS,
              optionsColor: ["#F56C6C", "#1afa29"],
            },
            {
              title: "创建时间",
              name: "createTime",
              width: 180,
              align: "center",
            },
            {
              title: "发布状态",
              name: "releaseStatus",
              width: 150,
              fixed: "right",
              align: "center",
              iconName: "setting",
              isRotate: true,
              iconTitle: "点击查看进度",
              iconPosition: "right",
              iconShow: (row) => {
                return row.releaseStatus === 1;
              },
              iconClick: (row) => {
                this.databaseSyncConfig.visible = true;
                this.databaseSyncConfig.databaseId = row.id;
              },
              select: true,
              options: this.$config.DATABASE_RELEASE_STATUS,
              optionsColor: ["#2c2c2c", "#409eff", "#67c23a", "#f56c6c"],
            },
            {
              title: "发布人",
              name: "releaseUser",
              width: 100,
              fixed: "right",
              align: "center",
            },
            {
              title: "发布信息",
              name: "releaseMessage",
              width: 100,
              ellipsis: true,
              fixed: "right",
              align: "center",
            },
            {
              title: "操作",
              name: "operate",
              width: 150,
              fixed: "right",
              operate: [
                {
                  name: "编辑",
                  permission: "DatabaseEdit",
                  onShow: (row) => {
                    return row.releaseStatus === 0;
                  },
                  fun: (row, formId, grid, refresh) => {
                    this.databaseConfig.rowId = row.id;
                    this.databaseConfig.formId = formId;
                    this.databaseConfig.visible = true;
                    this.databaseConfig.title = "编辑【资源库】";
                    this.databaseConfig.grid = grid;
                    this.databaseConfig.refreshGrid = refresh;
                  },
                },
                {
                  name: "删除",
                  permission: "DatabaseDelete",
                  confirm: true,
                  message: "确定删除选择的数据吗?",
                  onShow: (row) => {
                    return row.releaseStatus === 0;
                  },
                  fun: async (row, formId, grid, refresh) => {
                    await databaseDelete(row.id);
                    refresh(grid);
                  },
                },
                {
                  name: "发布",
                  permission: "DatabaseRelease",
                  confirm: true,
                  message: "确定发布选择的资源库吗?",
                  fun: async (row, formId, grid, refresh) => {
                    await databaseRelease(row.id);
                    refresh(grid);
                  },
                },
                {
                  name: "更多",
                  more: [
                    {
                      name: "启用",
                      permission: "DatabaseEnabled",
                      fun: async (row, formId, grid, refresh) => {
                        this.$confirm("确定启用当前的数据吗？", "提示", {
                          confirmButtonText: "确定",
                          cancelButtonText: "取消",
                          type: "warning",
                        })
                          .then(async () => {
                            await databaseEnabled(row.id, 1);
                            refresh(grid);
                          })
                          .catch(() => {
                            this.$message({
                              type: "info",
                              message: "已取消操作",
                            });
                          });
                      },
                    },
                    {
                      name: "禁用",
                      permission: "DatabaseDisabled",
                      fun: async (row, formId, grid, refresh) => {
                        this.$confirm("确定禁用选择的数据吗？", "提示", {
                          confirmButtonText: "确定",
                          cancelButtonText: "取消",
                          type: "warning",
                        })
                          .then(async () => {
                            await databaseEnabled(row.id, 0);
                            refresh(grid);
                          })
                          .catch(() => {
                            this.$message({
                              type: "info",
                              message: "已取消操作",
                            });
                          });
                      },
                    },
                    {
                      name: "操作记录",
                      fun: async (row) => {
                        this.databaseSyncConfig.visible = true;
                        this.databaseSyncConfig.databaseId = row.id;
                      },
                    },
                  ],
                },
              ],
            },
          ],
          tableData: [],
          api: databaseList,
          realoadTableData: async (_this, ref, api, formId) => {
            if (!formId) return;
            const res = await api(formId);
            this.$set(_this, "tableData", res.data);
          },
        },
        {
          label: "状态记录",
          name: "audit",
          type: "grid",
          height: 650,
          pagination: {
            onShow: false,
          },
          loading: false,
          tableData: [],
          columns: [
            {
              title: "上个状态",
              name: "preStatus",
              width: 150,
              align: "center",
              select: true,
              options: this.$config.MERCHANT_APPLY_STATUS,
            },
            {
              title: "当前状态",
              name: "curentStatus",
              width: 150,
              align: "center",
              select: true,
              options: this.$config.MERCHANT_APPLY_STATUS,
            },
            {
              title: "备注",
              name: "remark",
              width: 250,
              align: "center",
            },
            {
              title: "创建人",
              name: "createName",
              width: 150,
              align: "center",
            },
            {
              title: "变更时间",
              name: "createTime",
              width: 250,
              align: "center",
            },
          ],
          api: merchantsHandleList,
          realoadTableData: async (_this, ref, api, formId) => {
            if (!formId) return;
            this.$set(_this, "loading", true);
            const res = await api(formId);
            this.$set(_this, "tableData", res.data);
            this.$set(_this, "loading", false);
          },
        },
      ],
    };
  },
  created() {
    // 加载商户详情数据
    this.$nextTick(() => {
      const tableIds = storage.getFormPageTableIds();
      this.tableRowIds = JSON.parse(tableIds);
      this.currentRowId = Number(this.$route.query.id);
      this.loadMerchantDetail();
    });
  },
  methods: {
    // 详情
    async loadMerchantDetail() {
      const id = this.currentRowId;
      const res = await merchantDetail(id);
      this.$set(this, "rowData", res.data);
    },

    // 点击返回
    backEvent() {
      this.$router.push({
        path: "/merchant/info",
      });
    },

    // 上一页 下一页
    lastNextRow(rowId, _this, activeGridTab, refreshGridTable, loading) {
      this.currentRowId = rowId;
      setTimeout(() => {
        this.loadMerchantDetail();
        if (loading) {
          loading.close();
        }
        refreshGridTable();
      }, 200);
    },

    // 确定处理中
    async confirmMerchantsHandle() {
      await merchantHandle(this.currentRowId, { ...this.auditConfig.form });
      this.auditConfig.visible = false;
      this.loadMerchantDetail();
    },
  },
};
</script>
<style lang="scss" scoped></style>
